
<!DOCTYPE html>
<html>
  <head>
    <title>jQuery WeUI</title>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">


      <!-- head 中 -->
      <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
      <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

  </head>

  <body ontouchstart>
<style>
    .layui-upload-file{display: none;}
</style>

    <header class='demos-header'>
      <h1 class="demos-title">表单</h1>
    </header>
 <form class="layui-form" id="infoform" action="home/test/test" method="post">

    <div class="weui-cells__title">文本域</div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea class="weui-textarea" placeholder="请输入文本" rows="3"  required  lay-verify="required" ></textarea>
          <div class="weui-textarea-counter"><span>0</span>/200</div>
        </div>
      </div>
    </div>

    <div class="weui-cells__title">选择</div>
    <div class="weui-cells">

      <div class="weui-cell weui-cell_select weui-cell_select-before">
        <div class="weui-cell__hd">
          <select class="weui-select" name="select2" lay-ignore>
            <option value="1">+86</option>
            <option value="2">+80</option>
            <option value="3">+84</option>
            <option value="4">+87</option>
          </select>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码"  required  lay-verify="required" >
        </div>
      </div>
    </div>
    <div class="weui-cells__title">选择</div>
    <div class="weui-cells">
      <div class="weui-cell weui-cell_select">
        <div class="weui-cell__bd">
          <select class="weui-select" name="select1" lay-ignore >
            <option selected="" value="1">微信号</option>
            <option value="2">QQ号</option>
            <option value="3">Email</option>
          </select>
        </div>
      </div>
      <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
          <label  class="weui-label">国家/地区</label>
        </div>
        <div class="weui-cell__bd">
          <select class="weui-select" name="select2" lay-ignore>
            <option value="1">中国</option>
            <option value="2">美国</option>
            <option value="3">英国</option>
          </select>
        </div>
      </div>
    </div>



    <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-uploader">
            <div class="weui-uploader__hd">
              <p class="weui-uploader__title">图片上传</p>
            </div>
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles">
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
              </ul>
              <div class="weui-uploader__input-box" id="idpic_button" >

                <p id="demoText"></p>

                  <input id="idpic" name="idpic"   >
              </div>
              
            </div>
          </div>
        </div>
      </div>

     <div class="weui-cell">
         <div class="weui-cell__bd">
             <div class="weui-uploader">
                 <div class="weui-uploader__hd">
                     <p class="weui-uploader__title">图片上传</p>
                 </div>
                 <div class="weui-uploader__bd">
                     <ul class="weui-uploader__files"  id="Files" >
                         <li class="weui-uploader__file" id="idpic_back_img" style="background-image:url(./images/pic_160.png)"></li>
                     </ul>
                     <div class="weui-uploader__input-box" id="idpic_back_button">
                         <p id="demoText_idpic"></p>
                         <input name="idpic_back" id="idpic_back"   >
                     </div>

                 </div>
             </div>
         </div>
     </div>




    <label for="weuiAgree" class="weui-agree">
      <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox" lay-ignore>
      <span class="weui-agree__text">
        阅读并同意<a href="javascript:void(0);">《相关条款》</a>
      </span>
    </label>

    <div class="weui-btn-area">
      <button class="weui-btn weui-btn_primary"  lay-submit lay-filter="formDemo">确定</button>
    </div>

</form>


    <!-- body 最后 -->
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="layui/layui.all.js"></script>

    <script>
        layui.use(['upload','form'], function(){
          var upload = layui.upload;
           
            //执行实例
            var uploadInst = upload.render({
                elem: '#idpic_button' //绑定元素
                , url: '/home/test/uploadone/' //上传接口
                , acceptMime: 'image/jpg,image/png'  //（只显示 jpg 和 png 文件）
                , size: 6000 //限制文件大小，单位 KB  6M
                ,field:'idpic'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    $('#uploaderFiles').empty();
                    obj.preview(function (index, file, result) {
                        $('#uploaderFiles').append(' <li class="weui-uploader__file" style="background-image:url(' + result + ')"></li>')
                    });
                }
                , done: function (res) {
                    //上传完毕回调
                    if(res.code=='200')
                    {
                        $("#idpic").val(res.file);
                    }
                    else
                    {
                        alert(res.message);
                    }




                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
              }


          
          });



            var uploadInst2 = upload.render({
                elem: '#idpic_back_button' //绑定元素
                , url: '/home/test/uploadback/' //上传接口
                , acceptMime: 'image/jpg,image/png'  //（只显示 jpg 和 png 文件）
                , size: 6000 //限制文件大小，单位 KB  6M
                , field: 'idpic_back'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    $('#Files').empty();
                    obj.preview(function (index, file, result) {
                        $('#Files').append(' <li class="weui-uploader__file" style="background-image:url(' + result + ')"></li>')
                    });
                }
                , done: function (res) {
                    //上传完毕回调
                    $("#idpic_back").val(res.file);
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText_idpic');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst2.upload();
                    });
                }



            });



        });





        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){


            $.ajax({
                type: "post",
                url: "/home/test/test",
                data: $("#infoform").serialize(),
                dataType: "json",
                success: function(data){
                    alert(data);
                    console.log(data);

                }
            });


          //  layer.msg($("#infoform").serialize() );
            return false;
        });

        </script>
 


    <script>
     /*  $("#showTooltips").click(function() {
        var tel = $('#tel').val();
        var code = $('#code').val();
        if(!tel || !/1[3|4|5|7|8]\d{9}/.test(tel)) $.toptip('请输入手机号');
        else if(!code || !/\d{6}/.test(code)) $.toptip('请输入六位手机验证码');
        else $.toptip('提交成功', 'success');
      }); */
    </script>
  </body>
</html>
